<template>
    <rx-dialog @handOk="handleOk" @cancel="cancel">
        <div class="flexBoxs">
            <div class="top">
                <div class="left">
                    <header>{{i18n('form.field','字段')}}</header>
                    <div class="fieldContainer">
                        <div>{{i18n('mapScript.mainFields','主表字段')}}</div>
                        <a-select style="width: 100%;" allowClear :options="mainFields" @change="insert"></a-select>
                        <div>{{i18n('mapScript.subFields','子表字段')}}</div>
                        <a-select style="width: 100%;" allowClear :options="subFields" @change="insert"></a-select>
                    </div>
                </div>
                <div class="contents">
                    <header>{{i18n('mapScript.operator','运算符')}}</header>
                    <div class="operatorContainer" style="height:170px">
                        <div @click="insert('+')">+</div>
                        <div @click="insert('-')">-</div>
                        <div @click="insert('*')">*</div>
                        <div @click="insert('/')">/</div>
                        <div @click="insert('()')">()</div>
                        <div @click="insert('cur.')">{{i18n('mapScript.current','当前')}}</div>
                        <div @click="insert('old.')">{{i18n('mapScript.original','原记录')}}</div>
                        <div @click="insert('mainCur.')">{{i18n('mapScript.mainCur','主表当前')}}</div>
                        <div @click="insert('mainOld.')">{{i18n('mapScript.mainOld','主表原记录')}}</div>
                        <div @click="insert('FormulaUtil.getLabel()')">{{i18n('mapScript.get','获取')}}Label</div>
                        <div @click="insert('FormulaUtil.getValue()')">{{i18n('mapScript.get','获取')}}Value</div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <a-textarea style="height: 100%;resize: none;" v-model="valueData"></a-textarea>
            </div>
        </div>
    </rx-dialog>
</template>

<script>
    import {RxDialog, Util, RxLayout} from "@lowcode/jpaas-common-lib"
    import FormBoEntityApi from "@/api/form/bo/formBoEntity";

    export default {
        name: "formSolutionMappingScript",
        props: ["layerid", "destroy", "value", "fieldName", "boDefId", "isMain", "entName"],
        components: {
            RxDialog,
            RxLayout
        },
        data() {
            return {
                valueData: "",
                mainFields: [],
                subFields: []
            }
        },
        created() {
            this.init();
        },
        methods: {
            i18n(name,text,key){
                return this.$ti18(name,text,"formSolution",key);
            },
            init() {
                if (this.value) {
                    this.valueData = this.value;
                }
                if (this.isMain == "yes") {
                    this.getCombFields(this.boDefId, this.entName, "mainFields");
                } else {
                    this.getCombFields(this.boDefId, '_main', "mainFields");
                    this.getCombFields(this.boDefId, this.entName, "subFields");
                }
            },
            getCombFields(boDefId, tableName, ctlId) {
                var self = this;
                FormBoEntityApi.getFieldByBoDefId(boDefId, tableName).then(data => {
                    self[ctlId] = data.map(item => {
                        return {label: item.comment, value: item.name}
                    })
                })
            },
            getData() {
                return this.valueData;
            },
            handleOk() {
                Util.closeWindow(this, "ok", this.getData());
            },
            cancel() {
                Util.closeWindow(this, "cancel");
            },
            insert(text) {
                if (text) {
                    this.valueData += text;
                }
            }
        }
    }
</script>

<style scoped>
    fieldset {
        height: 100%;
        border: 1px solid silver;
    }

    fieldset legend {
        font-weight: bold;
    }

    div.operatorContainer {
        padding: 5px;
        text-align: left;
        overflow: auto;
        margin-top: 6px;
    }
    div.operatorContainer > div {
        border-radius: 5px;
        border: 1px solid silver;
        display: inline-block;
        text-align: center;
        margin: 4px;
        font-size: 16px;
        font-weight: bold;
        padding: 4px 10px;
        cursor: pointer;
        background: #f0f2f5;
    }

    div.operatorContainer > div:hover {
        background: white;
    }

    div.fieldContainer {
        padding:0 10px;
        text-align: left;
        overflow: auto;
    }
    div.fieldContainer>div{
        padding: 10px 0;
    }

    .flexBoxs{
        display: flex;
        width: 100%;
        height: 100%;
        background: #f0f2f5;
        flex-direction: column;
        box-sizing: border-box;
    }
    .flexBoxs .bottom{
        flex: 1;
        background: #fff;
        padding: 10px;
        border-radius: 6px;
        box-sizing: border-box;
    }
    .top{
        display: flex;
        margin-bottom: 10px;
        height: 250px;
    }
    .top header{

    }
    .top header:before{
        content: '';
        width: 3px;
        height: 13px;
        display: inline-block;
        background: #4D9EFF;
        margin-right: 8px;
        vertical-align: -2px;
    }
    .top .contents{
        flex: 1 ;
        background: #fff;
        padding: 10px;
        border-radius: 6px;
        box-sizing: border-box;
    }
    .top .left{
        width:300px;
        background: #fff;
        padding: 10px;
        border-radius: 6px;
        margin-right: 10px;
        box-sizing: border-box;
        box-sizing: border-box;
    }
</style>
